<template>
  <div class="father">
  <div class="container">
    <a-form-model :model="form" :rules="rules" ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-card class="card card1" :bordered="false">
        <a-button type="primary" @click="back">返回上一页</a-button>
      </a-card>
      <a-card class="card card1" title="批量类型">
        <a-radio-group v-model="type" button-style="solid">
          <a-radio-button :value="1"> 自定义 </a-radio-button>
          <a-radio-button :value="2"> 程序化 </a-radio-button>
        </a-radio-group>
      </a-card>
      <a-card class="card card1" title="品牌信息" :bordered="false">
        <a-form-model-item label="品牌名称">
          <a-input placeholder="请输入品牌名称, 最多11个字符" v-model="pinpaiName" :maxLength="11"/>
        </a-form-model-item>
        <a-form-model-item label="品牌头像">
          <!-- <a-input placeholder="请输入品牌头像" v-model="pinpaiUrl" /> -->
          <logoSelector @confirm="logoConfirm" />
        </a-form-model-item>
      </a-card>
      <!-- 选择单元 -->
      <a-card class="card card1" title="选择单元" :bordered="false">
        <div class="area">
          <a-input-search :loading="searchLoading" style="width:300px;" placeholder="搜索单元名称" enter-button @search="onDanyuanSearch" />
        </div>
        <a-tree v-model="chedkedKeys" :expandedKeys.sync="expandedKeys" :tree-data="treeData" :replaceFields="{title:'campaignFeedName'}" @check="onCheck" checkable defaultExpandAll>
          <div slot="slot" class="line1" :class="item.mod=='danyuan'?'treeItem2':'treeItem'" slot-scope="item" @click="treeClick(item)">
            <span v-if="item.mod == 'home'">{{item.campaignFeedName}}</span>
            <span v-if="item.mod == 'jihua'">{{item.campaignFeedName}}</span>
            <span v-if="item.mod == 'danyuan'">{{item.adgroupFeedName}}</span>
          </div>
        </a-tree>
      </a-card>
      <!-- 选择单元 -->
      <!-- 创意标题 -->
      <a-card class="card card1" title="创意标题" :bordered="false">
        <m-textline :values="form.biaoti" title="创意标题" @change="changeTextLine" />
      </a-card>
      <!-- 创意标题 -->
      <!-- 创意样式 -->
      <a-card class="card card2" title="创意样式" :bordered="false" v-if="type == 1">
        <div class="item" v-for="(item,index) in form.yangshi" :key="index">
          <a-input v-model="item.value" type="number" :addon-before="item.title+':'" addon-after="个" @change="(e) => yangshiChange(e,index)" />
        </div>
      </a-card>
      <a-card class="card card2" title="创意样式" :bordered="false" v-if="type == 2">
        <div class="item" v-for="(item,index) in form.yangshi2" :key="index">
          <a-input v-model="item.value" type="number" :addon-before="item.title+':'" addon-after="个" @change="(e) => yangshiChange2(e,index)" />
        </div>
      </a-card>
      <!-- 创意样式 -->
      <!-- 图片选择 -->
      <a-card class="card card2" title="图片选择" :bordered="false" >
        <picSelector @confirm="picConfirm" :value="picList"/>
      </a-card>
      <!-- 图片选择 -->
      <!-- 视频选择 -->
      <a-card class="card card2" title="视频选择" :bordered="false">
        <videoSelector @confirm="videoConfirm" :value="videoList" />
      </a-card>
      <!-- 视频选择 -->
      <a-card v-if="type == 1">
        <a-button type="primary" @click="submit" :loading="loading" style="margin-right:20px;">生成</a-button>
        <a-button type="primary" @click="submit2" :loading="loading" style="margin-right:20px;">异步生成</a-button>
        <a-button @click="errorVisible = true" >错误信息</a-button>
      </a-card>

      <a-card v-if="type == 2">
        <a-button type="primary" @click="c_submit" :loading="loading" style="margin-right:20px;">生成</a-button>
        <a-button type="primary" @click="c_submit2" :loading="loading" style="margin-right:20px;">异步生成</a-button>
        <a-button @click="errorVisible = true" >错误信息</a-button>
      </a-card>
    </a-form-model>
  </div>
  <a-drawer
    title="错误信息"
    placement="right"
    :closable="false"
    :visible="errorVisible"
    @close="errorVisible = false"
    :width="400"
  >
    <p v-for="(item,index) in errorList" :key="index">{{item}}</p>
  </a-drawer>
  </div>
</template>

<script>
import { getImageList,addCreativeFeed,asyncAddCreativeFeed } from '@/api/xinxiliu/getBaidu'
import picSelector from '@/components/picSelector'
import videoSelector from '@/components/videoSelector'
import logoSelector from '@/components/logoSelector'
import { getCampaignFeed } from '@/api/xinxiliu/jihua'
import { getAdgroupFeed } from '@/api/xinxiliu/danyuan'
import moment from 'moment'
export default {
  name:'bulkAdd',
  data(){
    return{
      form:{
        biaoti:[], //创意标题
        yangshi:[
          {title:'大图',value:0,name:'datu',id:107},
          {title:'横版',value:0,name:'henban',id:108},
          {title:'竖版',value:0,name:'shuban',id:111},
          {title:'直播横图',value:0,name:'zhibo',id:118},
        ],
        yangshi2:[
          {title:'大图',value:0,name:'datu',id:114},
          {title:'横版',value:0,name:'henban',id:114},
          {title:'竖版',value:0,name:'shuban',id:114}
        ]
      },
      loading:false,
      rules:{
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      pinpaiName:'',
      pinpaiUrl:'',

      //选择单元start
      expandedKeys:['0'],
      treeData:[],
      searchLoading:false,
      danyuan_search:'',
      checked_adgroupFeedId:[],
      chedkedKeys:[],
      //选择单元end
      // 创意标题start
      tags: [],
      inputVisible: false,
      inputValue: '',
      // 创意标题end
      imageUrl: '',
      pageNo: 1,
      //submit参数
      creativeFeedTypes:[], //总参数
      chuangyiAl:[],
      picList:[], // 已选择的图片列表
      heng_picList:[], // 已选择的横版图片
      heng_picListAl:[], //随机分配，已分配数组
      shu_picList:[], // 已选择的竖版图片
      shu_picListAl:[],
      videoList:[],
      heng_videoList:[], //
      heng_videoAl:[],
      shu_videoList:[], //
      shu_videoAl:[],
      goSetMaterial:null, // setMaterial的generator
      goSetMaterialIndex:0,

      errorVisible:false,
      errorList:[],

      type:1,
    }
  },
  created(){
    // this.getCampaignFeed()
  },
  methods: {
    //submit
    async submit(){
      if(this.check()){
        this.loading = true
        const _this = this
        this.setBase() //设置 所属推广单元ID + 创意样式ID，
        await this.setMaterial() // 生成物料
        console.log(this.creativeFeedTypes,addCreativeFeed)
        addCreativeFeed({creativeFeedTypes:this.creativeFeedTypes}).then((res) => {
          // console.log(res)
          if(res.errcode == 0){
            let len = res.data.body.data.length
            _this.$message.success('成功上传'+len+'个创意')
            _this.loading = false
          }else{
            this.errorList = []
            this.errorVisible = true
            for(let item of res.data.header.failures){
              this.errorList.push(item.code + '-' + item.message)
            }
          }
        }).catch((err) => {
          this.errorList = []
          this.errorVisible = true
          for(let item of err.data.header.failures){
            this.errorList.push(item.code + '-' + item.message)
          }
          _this.loading = false
        });
      }
    },
    async submit2(){
      if(this.check()){
        this.loading = true
        const _this = this
        this.setBase() //设置 所属推广单元ID + 创意样式ID，
        await this.setMaterial() // 生成物料
        asyncAddCreativeFeed({creativeFeedTypes:this.creativeFeedTypes,brandName: this.pinpaiName}).then((res) => {
          // console.log(res)
          _this.loading = false
          if(res.errcode == 0){
            _this.$message.success(res.errmsg)
          }
        }).catch(()=>{
          _this.loading = false
        });
      }
    },
    check(){
      if(this.form.yangshi[0].value > 0 && this.heng_picList.length == 0){
        this.$message.error('请选择图片')
        return false
      }
      if(this.form.yangshi[1].value > 0 && this.heng_picList.length == 0){
        this.$message.error('请选择横版图片')
        return false
      }
      if(this.form.yangshi[2].value > 0 && (this.shu_picList.length == 0 || this.heng_picList.length == 0)){
        this.$message.error('请选择竖版与横版图片')
        return false
      }
      if(this.form.yangshi[3].value > 0 && this.heng_picList.length == 0){
        this.$message.error('请选择图片')
        return false
      }
      return true
    },
    setMaterial(){
      return new Promise((resolve) => {
        let promiseArr = []
        for(let i of this.creativeFeedTypes){
          let pinpai = {
            brand:this.pinpaiName,
            userPortrait:this.pinpaiUrl
          }
          switch(i.materialstyle){
            case 107:case 118: //大图
              promiseArr.push({func:this.setPic,item:i,pinpai})
              break
            case 108:
              promiseArr.push({func:this.setHengVideo,item:i,pinpai})
              break
            case 111:
              promiseArr.push({func:this.setShuVideo,item:i,pinpai})
              break
            default:
              i.material = ''
              break
          }
        }
        promiseArr.map(e=>{
          return e.func(e.item,e.pinpai)
        })
        Promise.all(promiseArr).then(()=>{
          resolve()
        })
      })
    },
    setShuVideo(item,pinpai){
      return new Promise((resolve) => {
        let img = this.heng_picList[this.shuffle(this.heng_picList,'heng_picListAl')]
        let img2 = this.shu_picList[this.shuffle(this.shu_picList,'shu_picListAl')]
        let picture2 = {
          imageId: img2.imageId,
          url: img2.url,
          desc1: img2.imageName,
          width: img2.width,
          height: img2.height,
        }
        let video = this.shu_videoList[this.shuffle(this.shu_videoList,'shu_videoAl')]
        let obj = {
          videoid: video.videoid,
          posterid: img2.imageId,
          horizontalCoverId:img.imageId,
          pictures: [picture2],
          pictureWidth: img2.width,
          pictureHeight: img2.height,
          title:this.tags[this.shuffle(this.tags,'chuangyiAl')],
          // videoText1:this.pinpaiName,
          // videoText2:'点击视频了解更多'
        }
        item.material = Object.assign(obj,pinpai) 
        item.material = JSON.stringify(item.material)
        resolve(obj)
      })
    },
    setHengVideo(item,pinpai){
      return new Promise((resolve) => {
        let img = this.heng_picList[this.shuffle(this.heng_picList,'heng_picListAl')]
        let picture = {
          imageId: img.imageId,
          url: img.url,
          desc1: img.imageName,
          width: img.width,
          height: img.height,
        }
        let video = this.heng_videoList[this.shuffle(this.heng_videoList,'heng_videoAl')]
        let obj = {
          videoid: video.videoid,
          posterid: img.imageId,
          pictures: [picture],
          pictureWidth: img.width,
          pictureHeight: img.height,
          title:this.tags[this.shuffle(this.tags,'chuangyiAl')]
        }
        item.material = Object.assign(obj,pinpai) 
        item.material = JSON.stringify(item.material)
        resolve(obj)
      })
    },
    setPic(item,pinpai){
      return new Promise((resolve) => {
        let n = this.shuffle(this.heng_picList,'heng_picListAl')
        let img = this.heng_picList[n]
        let picture = {
          imageId: img.imageId,
          url: img.url,
          desc1: img.imageName,
          width: img.width,
          height: img.height,
        }
        let obj = {
          pictures: [picture],
          pictureWidth: img.width,
          pictureHeight: img.height,
          title:this.tags[this.shuffle(this.tags,'chuangyiAl')]
        }
        item.material = Object.assign(obj,pinpai) 
        item.material = JSON.stringify(item.material)
        resolve(obj)
      })
    },
    setBase(){
      // 创意样式ID有几个，就生成几个相同推广单元ID的 Object
      let creativeFeedTypes = []
      for(let i of this.checked_adgroupFeedId){
        for(let j of this.form.yangshi){
          for(let k = 1;k<=j.value;k++){
            let obj = {
              adgroupFeedId: i,
              materialstyle: j.id,
              creativeFeedName: moment().format('MM-DD') + Math.random().toString(36).substr(2),
              ideaType:0,
            }
            creativeFeedTypes.push(obj)
          }
        }
      }
      this.creativeFeedTypes = creativeFeedTypes
      // 重置al
      this.chuangyiAl = []
      this.heng_picListAl = []
      this.shu_picListAl = []
      this.heng_videoAl = []
      this.shu_videoAl = []
      // console.log(this.creativeFeedTypes)
    },

    // 程序化
    async c_submit(){
      if(this.check()){
        this.loading = true
        const _this = this
        this.c_setBase() //设置 所属推广单元ID + 创意样式ID，
        await this.c_setMaterial() // 生成物料
        for(let item of this.creativeFeedTypes){
          item.material = JSON.stringify(item.material)
        }
        addCreativeFeed({creativeFeedTypes:this.creativeFeedTypes}).then((res) => {
          // console.log(res)
          if(res.errcode == 0){
            let len = res.data.body.data.length
            _this.$message.success('成功上传'+len+'个创意')
            _this.loading = false

          }
        }).catch((err) => {
          this.errorList = []
          this.errorVisible = true
          for(let item of err.data.header.failures){
            this.errorList.push(item.code + '-' + item.message)
          }
          _this.loading = false
        });
      }
    },
    async c_submit2(){
      if(this.check()){
        this.loading = true
        const _this = this
        this.c_setBase() //设置 所属推广单元ID + 创意样式ID，
        await this.c_setMaterial() // 生成物料
        for(let item of this.creativeFeedTypes){
          item.material = JSON.stringify(item.material)
        }
        asyncAddCreativeFeed({creativeFeedTypes:this.creativeFeedTypes,brandName: this.pinpaiName}).then((res) => {
          // console.log(res)
          _this.loading = false
          if(res.errcode == 0){
            _this.$message.success(res.errmsg)
          }
        }).catch(()=>{
          _this.loading = false
        });
      }
    },
    c_check(){
      if(this.form.yangshi2[0].value > 0 && this.heng_picList.length == 0){
        this.$message.error('请选择图片')
        return false
      }
      if(this.form.yangshi2[1].value > 0 && this.heng_picList.length == 0){
        this.$message.error('请选择横版图片')
        return false
      }
      if(this.form.yangshi2[2].value > 0 && (this.shu_picList.length == 0 || this.heng_picList.length == 0)){
        this.$message.error('请选择竖版与横版图片')
        return false
      }
      return true
    },
    c_setMaterial(){
      return new Promise((resolve) => {
        let promiseArr = []
        for(let i of this.creativeFeedTypes){
          let pinpai = {
            brand:this.pinpaiName,
            userPortrait:this.pinpaiUrl
          }

          promiseArr.push({func:this.c_setPic,item:i,pinpai})
          promiseArr.push({func:this.c_setHengVideo,item:i,pinpai})
          promiseArr.push({func:this.c_setShuVideo,item:i,pinpai})

        }
        promiseArr.map(e=>{
          return e.func(e.item,e.pinpai)
        })
        Promise.all(promiseArr).then(()=>{
          resolve()
        })
      })
    },
    c_setShuVideo(item){
      let shuban = this.form.yangshi2.find(e=>e.name == 'shuban')
      let videoVertical = []; 
      return new Promise((resolve) => {
        for(let i = 0; i < shuban.value; i++){
          // 生成视频封面多图
          let poster = []
          let horizontalCover = []
          for(let o = 0; o < 6; o++){
            let img = this.heng_picList[this.shuffle(this.heng_picList,'heng_picListAl')]
            let img2 = this.shu_picList[this.shuffle(this.shu_picList,'shu_picListAl')]
            poster = poster.concat([{imageId: img2.imageId}])
            horizontalCover = horizontalCover.concat([{imageId: img.imageId || ''}])
          }
          let video = this.shu_videoList[this.shuffle(this.shu_videoList,'shu_videoAl')]
          let videoVerticalItem = {
            videoId: video.videoid,
            videoUrl:video.url,
            poster: poster,
            horizontalCover: horizontalCover,
          }
          videoVertical.push(videoVerticalItem)
        }
        item.material.elements.videoVertical = videoVertical
        resolve()
      })
    },
    c_setHengVideo(item){
      let henban = this.form.yangshi2.find(e=>e.name == 'henban')
      let videoHorizontal = []
      return new Promise((resolve) => {
        for(let i = 0; i < henban.value; i++){
          // 生成视频封面多图
          let poster = []
          for(let o = 0; o < 6; o++){
            let img = this.heng_picList[this.shuffle(this.heng_picList,'heng_picListAl')]
            poster = poster.concat([{imageId: img.imageId}])
          }
          let video = this.heng_videoList[this.shuffle(this.heng_videoList,'heng_videoAl')]
          let videoHorizontalItem = {
            videoId: video.videoid,
            videoUrl:video.url,
            poster: poster,
          }
          videoHorizontal.push(videoHorizontalItem)
        }
        item.material.elements.videoHorizontal = videoHorizontal
        resolve()
      })
    },
    c_setPic(item){
      return new Promise((resolve) => {
        let datu = this.form.yangshi2.find(e=>e.name == 'datu')
        let pictureLarge = []
        for(let i = 0; i < datu.value; i++){
          let n = this.shuffle(this.heng_picList,'heng_picListAl')
          let img = this.heng_picList[n]
          let pictureLargeItem = {
            imageId: img.imageId,
          }
          pictureLarge.push(pictureLargeItem)
        }
        item.material.elements.pictureLarge = pictureLarge
        resolve()
      })
    },
    c_setBase(){
      // let datu = this.form.yangshi.find(e=>e.name == 'datu')
      // if(this.heng_picList.length <= 6){
      //   datu.value = this.heng_picList.length
      // }else{
      //   datu.value = 6
      // }
      // 创意样式ID有几个，就生成几个相同推广单元ID的 Object
      let creativeFeedTypes = []
      
      for(let i of this.checked_adgroupFeedId){
        // 生成标题
        let titles = []
        for(let o = 0; o < 6; o++){
          titles.push(this.tags[this.shuffle(this.tags,'chuangyiAl')])
        }
        // for(let j of this.form.yangshi){
          // for(let k = 1;k<=j.value;k++){
            let obj = {
              adgroupFeedId: i,
              materialstyle: 114,
              material:{
                brand:this.pinpaiName,
                userPortrait:this.pinpaiUrl,
                elements:{
                  titles,
                },
              },
              creativeFeedName: moment().format('MM-DD') + Math.random().toString(36).substr(2),
              ideaType:1,
            }
            creativeFeedTypes.push(obj)
          // }
        // }
      }
      this.creativeFeedTypes = creativeFeedTypes
      // 重置al
      this.chuangyiAl = []
      this.heng_picListAl = []
      this.shu_picListAl = []
      this.heng_videoAl = []
      this.shu_videoAl = []
      // console.log(this.creativeFeedTypes)
    },

    picConfirm(e){ //图片选择后执行
      let picList = []
      let heng_picList = []
      let shu_picList = []
      for(let i of e){
        if(i.width > i.height){
          heng_picList.push(i)
        }else{
          shu_picList.push(i)
        }
        picList.push(i)
      }
      this.picList = e
      this.heng_picList = heng_picList
      this.shu_picList = shu_picList
      console.log(this.picList,this.heng_picList,this.shu_picList)
    },
    videoConfirm(e){
      let heng_videoList = []
      let shu_videoList = []
      let videoList = []
      for(let i of e){
        if(i.width > i.height){
          heng_videoList.push(i)
        }else{
          shu_videoList.push(i)
        }
        videoList.push(i)
      }
      this.heng_videoList = heng_videoList
      this.shu_videoList = shu_videoList
      this.videoList = videoList
      console.log(this.heng_videoList,this.shu_videoList)
    },
    logoConfirm(e){
      console.log('logoConfirm',e)
      let pic = e[0]
      this.pinpaiUrl = pic.url
    },
    shuffle(arr,key) { //生成随机数
      //生成 arr.length 数量的数组 - e 中的数据
      //生成 0<= n < arr.length 新数组随机数
      //新数组[n] 即为输出
      let arrLength = arr.length;
      let newArr = []
      // console.log('before',this[key],key)
      for(let o = 0;o<arrLength;o++){
        let f = this[key].indexOf(o)
        // console.log('for',f,o,this[key],key) 
        if(f == -1){
          newArr.push(o)
        }
      }
      // console.log('center',newArr,this[key],key)
      let n = Math.floor(Math.random() * newArr.length)
      this[key].push(newArr[n])
      if(this[key].length == arrLength){
        this[key] = []
      }
      // console.log(n,newArr,this[key],this.tags[newArr[n]],key)
      return newArr[n];
    },
    

    // 选择单元
    getCampaignFeed(){ //查询计划
      if(this.danyuan_search == ''){
        this.$message.error('请输入搜索内容')
        return false
      }
      const _this = this;
      this.searchLoading = true
      getCampaignFeed({}).then(e=>{
        if(e.errcode == 0){
          let key = 1;
          let expandedKeys = []
          let ids = []; //带查询计划id,用于查询计划下的单元
          
          let danyuanKeywordArr = this.danyuan_search.split(' ')
          e.data.body.data = danyuanKeywordArr.reduce((preArr, key)=>{
            return preArr.filter(e=>e.campaignFeedName.indexOf(key) != -1 && key != "")
          }, e.data.body.data)
          // console.log(e.data.body.data)
          // e.data.body.data = e.data.body.data.filter(e=>e.campaignFeedName.indexOf(this.danyuan_search) != -1)
          for(let i of e.data.body.data){
            i.key = key;
            i.scopedSlots = {title: 'slot'}
            ids.push(i.campaignFeedId)
            i.mod = 'jihua'
            expandedKeys.push(key)
            key++;
          }
          e.data.body.data = e.data.body.data.sort((a, b) => new Date(b.addtime).valueOf() - new Date(a.addtime).valueOf())
          let dataSource = JSON.parse(JSON.stringify(e.data.body.data))
          let children = e.data.body.data
          _this.dataSource = dataSource
          // console.log('dataSource',dataSource,expandedKeys)
          if(e.data.body.data.length > 0){
            _this.getDanyuan(ids,children)
            _this.expandedKeys = expandedKeys
          }else{
            this.searchLoading = false
            _this.chedkedKeys = []
            _this.treeData = []
          }
        }
      }).catch(()=>{
        this.searchLoading = false
      })
    },
    getDanyuan(ids,children){ //查询计划下的单元，并拼接成树型数据
      const _this = this;
      let params = {
        ids,
        idType:1 // 1 - 计划类型 2 - 单元类型
      }
      let checked_adgroupFeedId = []
      getAdgroupFeed(params).then((e) => {
        this.loading = false
        this.searchLoading = false
        if(e.errcode == 0){
          _this.chedkedKeys = []
          let data = e.data.body.data
          for(let i of data){
            i.scopedSlots = {title: 'slot'}
            i.mod = 'danyuan'
            checked_adgroupFeedId.push(i.adgroupFeedId)
          }
          for(let item of children){
            item.children = data.filter(e=>e.campaignFeedId == item.campaignFeedId)
          }
          this.checked_adgroupFeedId = checked_adgroupFeedId
          let treeData = children
          _this.treeData = treeData
          _this.$nextTick(()=>{
            _this.chedkedKeys = _this.expandedKeys
          })
        }
      }).catch(()=>{
        this.searchLoading = false
      });
    },
    onDanyuanSearch(e){
      console.log(e)
      this.danyuan_search = e
      this.getCampaignFeed()
    },
    onCheck(checkedKeys, e){
      console.log(checkedKeys)
      let checked_adgroupFeedId = []
      for(let i of e.checkedNodes){
        let adgroupFeedId = i.data.props.adgroupFeedId
        if(adgroupFeedId){
          checked_adgroupFeedId.push(adgroupFeedId)
        }
      }
      this.checked_adgroupFeedId = checked_adgroupFeedId
      console.log('onCheck', this.checked_adgroupFeedId);
    },
    // 选择单元

    checkPic(){
      let params = {
        pageNo:this.pageNo
      }
      getImageList(params).then(() => {
        
      });
    },
    // 样式start
    yangshiChange(e,index){
      if(e.target.value >= 0){
        this.form.yangshi[index].value = e.target.value
      }else{
        this.form.yangshi[index].value = 0
      }
    },
    yangshiChange2(e,index){
      if(e.target.value >= 0){
        this.form.yangshi2[index].value = e.target.value
      }else{
        this.form.yangshi2[index].value = 0
      }
    },
    // 样式end

    // 创意标题start

    changeTextLine(val){
      let biaoti = []
      let tags = []
      for(let i of val){
        if(i.length > 30){
          i = i.replace('！','')
          i = i.replace('：','')
        }
        biaoti.push(i.slice(0,30))
        if(i !== ''){
          tags.push(i.slice(0,30))
        }
      }
      this.tags = tags
      this.form.biaoti = biaoti
    },

    handleClose(removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag);
      // console.log(tags);
      this.tags = tags;
      this.form.biaoti = tags
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },

    handleInputChange() {
      // this.inputValue = e.target.value;
      this.handleInputConfirm()
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      // console.log(tags);
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      });
      this.form.biaoti = tags
    },
    handleKeyCode(event) {
      if (event.keyCode == 13) {
        this.handleInputConfirm()
      }
    },
    back(){
      this.$router.go(-1)
    }
    // 创意标题end
  },
  components:{
    picSelector,
    videoSelector,
    logoSelector,
  }
}
</script>

<style scoped lang='less'>
.father{
  background-color: #f0f2f5;
}
.container{
  width: 1024px;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 20px 0px;
  margin: auto;
}
.card{
  margin-bottom: 20px;
}
.card1{
  .biaotiAddContent{
    width: 470px;
    margin-bottom: 20px;
    .tooltip{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:last-of-type{
        margin-bottom: 0;
      }
      .close{
        margin-left: 5px;
      }
    }
    .inputItem{
      
    }
  }
  .biaotiAddInput{
    width: 470px;
  }
}
.card2{
  .item{
    width: 200px;
    margin-bottom: 10px;
    margin-right: 10px;
    &:last-of-type{
      margin-bottom: 0px;
    }
  }
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>